<template>
  <bi-page
    id="risk"
    class="v-views-risk"
    :loading="loading"
    :banner="true"
    title="深圳市集中隔离点"
    sub-text="风险看板"
    sub-text-align="center"
  >
    <bi-panel>
      <div class="view-risk-container">
        <bi-risk-people-quotas
          :data="statistics"
        ></bi-risk-people-quotas>
        <div class="body-div">
          <div class="exhibition">
            <!-- 第二部分 -->
            <el-row>
              <div class="symptoms-box">
                <ul class="symptoms-ul">
                  <li
                    class="symptoms-li"
                    v-for="(item, index) in secondData"
                    :key="index"
                    @click="goList(item.dataType, undefined, item)"
                  >
                    <compnoent :is="item.detail ? 'el-popover' : 'div'" popper-class="symptoms-popover__wrap" class="symptoms-popover" trigger="click">
                      <div slot="reference" class="symptoms-handle">
                        <div class="symptoms-l">
                          <img :src="item.icon" />
                        </div>
                        <div class="symptoms-r">
                          <!-- <div class="num" @click="goList(item.dataType)"> -->
                          <div class="num">
                            {{ item.value }}
                          </div>
                          <div class="text">{{ item.name }}</div>
                          <div class="percent">{{ item.rate }}%</div>
                        </div>
                      </div>
                      <div v-if="item.detail" class="symptoms-detail">
                        <ul class="symptoms-detail__list">
                          <template
                            v-for="(item, index) in item.detail"
                          >
                            <li
                              class="symptoms-detail__divided"
                              :key="`divided-${index}`"
                              v-if="item.type === 'divided'"
                            ></li>
                            <li
                              v-else
                              class="symptoms-detail__item"
                              :key="`item-${index}`"
                            >
                              <span class="symptoms-detail__label">{{item.name}}</span>
                              <span class="symptoms-detail__target">{{item.value}}</span>
                            </li>
                          </template>
                        </ul>
                      </div>
                    </compnoent>
                  </li>
                </ul>
              </div>
            </el-row>
          </div>
          <div class="indicator">
            <div class="step">
              <ul class="step-ul">
                <li
                  v-for="(item, index) in stepData"
                  :key="index"
                  class="step-li"
                  :style="{ width: item.width }"
                >
                  <span class="big-spancir">
                    <div
                      class="big-spancir_img"
                      v-show="index != 0 && index != stepData.length - 1"
                    >
                      <img src="../../assets/icon/risk_icon_arrow.png" alt="" />
                    </div>
                    <span class="circle">
                      <span
                        class="scale"
                        v-if="index > 0 && index != stepData.length - 1"
                      ></span>
                      <span class="big-circle" v-if="item.state">
                        <span class="centerCircle"></span>
                      </span>
                    </span>
                    <span
                      class="step-name"
                      :style="{ color: item.state ? '#4d9bfc' : '' }"
                    >
                      {{ item.name }}
                      <!-- <img v-if="item.arrow" src="../../assets/icon/arrow_right.png" /> -->
                    </span>
                  </span>
                  <span
                    v-if="index != stepData.length - 1"
                    class="linellae"
                    :class="{ active: index === 1 || index === 2 }"
                  ></span>

                  <div class="wire-item" v-if="item.arrIndex">
                    <!-- <staticstics-li :strong-list="statisticsArr[item.arrIndex - 1].strongList"
                                    :week-list="statisticsArr[item.arrIndex - 1].weekList"
                                    @click="shujukanban" /> -->
                  </div>
                </li>
              </ul>
              <div class="staticstics-nav">
                <staticstics-li-nav :strong-list="statisticsArr" @sjkb-click="handleSjkbClick" />
              </div>
            </div>
          </div>
        </div>
        <drawer :symptomsList="otherSymptomsArr" ref="drawer" />
      </div>

    </bi-panel>
  </bi-page>
</template>

<script>
import { staticalquery } from "./index.js";
import {
  loadHealthInvestigateAndRiskAssessment
  ,loadDailyHealth
  ,loadCheckinInformation
  ,loadPersonClassify
} from 'board/apis/risk';
import "@/assets/icon/font_yz/iconfont.css";
import { log } from 'util';
import BiPage from 'board/common/page'
import BiPanel from 'board/common/panel'
import BigNumber from 'bignumber.js'
import BiRiskPeopleQuotas from './components/risk-people-quotas'

export default {
  components: {
    BiPage,
    BiPanel,
    BiRiskPeopleQuotas,
    staticsticsLi: () => import("./components/staticsticsLi"),
    staticsticsLiNav: () => import("./components/staticsticsLiNav"),
    drawer: () => import("./components/drawer"),
    headerTop: () => import("../gl-bulletinBoard/components/headerTop")
  },
  computed: {
    statisticsArr() {
      const statisticsArr = [
        {
          strongList: [
            {
              label: "隔离点",
              value: this.statistics.geLiDianNum,
              unit: "个",
              icon: require("../../assets/icon/risk_icon_nav1.png")
            }
          ],
          weekList: [
            {
              label: "已使用房间",
              value: this.statistics.usedHouseNum,
              unit: "间"
            },
            {
              label: "空房间",
              value: this.statistics.emptyHouseNum,
              unit: "间"
            },
            {
              label: "工作人员",
              value: this.statistics.gongZuoRenYuanNum,
              unit: "人"
            },
            {
              label: "休眠隔离点",
              value: this.statistics.xiuMianGeLiDianNum,
              unit: "个"
            }
          ]
        },
        {
          strongList: [
            {
              label: "隔离人员",
              value: this.statistics.personNum,
              unit: "人",
              icon: require("../../assets/icon/risk_icon_nav2.png")
            }
          ],
          weekList: [
            [{
              label: "健康排查",
              value: this.statistics.healthInvestigateNum,
              unit: "人"
            }, {
              label: '完成比例',
              value: new BigNumber(this.statistics.healthInvestigateNum).div(this.statistics.personNum).multipliedBy(100).toFixed(2),
              unit: '%'
            }],
            [{
              label: "心理评估",
              value: this.statistics.riskAssessmentNum,
              unit: "人"
            }, {
              label: '完成比例',
              value: new BigNumber(this.statistics.riskAssessmentNum).div(this.statistics.personNum).multipliedBy(100).toFixed(2),
              unit: '%'
            }],
            [{
              label: "日常监测",
              value: this.statistics.dailydataOnce,
              unit: "人次"
            }, {
              label: '完成比例',
              value: new BigNumber(this.statistics.dailydataOnce).div(this.statistics.dailydataTotal).multipliedBy(100).toFixed(2),
              unit: '%'
            }],
            {
              label: "消杀",
              value: this.statistics.xiaoShaNum,
              unit: "次"
            }
          ]
        },
        {
          strongList: [
            {
              label: "当日离点",
              value: this.statistics.dangRiLiDianNum,
              unit: "人",
              icon: require("../../assets/icon/risk_icon_nav3.png")
            },
            {
              label: "累计离点",
              value: this.statistics.leiJiLiDianNum,
              unit: "人",
              icon: require("../../assets/icon/icon34.png")
            }
          ],
          weekList: [
            {
              label: "转医院",
              value: this.statistics.zhuanYiLiaoJiGouNum,
              unit: "人"
            },
            {
              label: "转市内居家隔离",
              value: this.statistics.shiNeiJuJiaNum,
              unit: "人"
            },
            {
              label: "转市外隔离",
              value: this.statistics.zhuanShiWaiNum,
              unit: "人"
            },
            {
              label: "解除隔离",
              value: this.statistics.jiechuGeLiNum,
              unit: "人"
            }
          ]
        }
      ];
      return statisticsArr;
    },
    otherSymptomsArr() {
      const otherSymptomsArr = [
        {
          number: 0,
          label: "乏力"
        },
        {
          number: 0,
          label: "鼻塞"
        },
        {
          number: 0,
          label: "流涕"
        },
        {
          number: 0,
          label: "咽痛"
        },
        {
          number: 0,
          label: "嗅觉/味觉减退"
        },
        {
          number: 0,
          label: "结膜炎"
        },
        {
          number: 0,
          label: "肌痛"
        },
        {
          number: 0,
          label: "腹泻"
        }
      ];
      return otherSymptomsArr;
    }
  },
  data() {
    return {
      clientWidth: "",
      loading: false,
      timer: false,
      geLiDianNum: 0,
      geLiDianNaruNum: 0,
      secondData: [
        {
          name: "密接次密接人员",
          value: 0,
          icon: require("../../assets/icon/risk_icon1.png"),
          dataType: 40
        },
        {
          name: "航班入境人员",
          value: 0,
          icon: require("../../assets/icon/risk_icon2.png"),
          dataType: 41,
          click: () => {
            this.$router.push({
              path: '/flightTopic'
            })
          }
        },
        {
          name: "香港入境人员",
          value: 0,
          icon: require("../../assets/icon/risk_icon3.png"),
          dataType: 42
        },
        {
          name: "中高风险地区人群",
          value: 0,
          icon: require("../../assets/icon/risk_icon4.png"),
          dataType: 43
        },
        {
          name: "专项排查人群",
          value: 0,
          icon: require("../../assets/icon/risk_icon5.png"),
          dataType: 44
        },
        {
          name: "其他人群",
          value: 0,
          icon: require("../../assets/icon/risk_icon6.png"),
          dataType: 99,
          detail: [{
            name: '其他人群',
            value: 45,
          }, {
            name: '占比',
            value: 45,
          }, {
            type: 'divided'
          }, {
            name: '治愈出院人员',
            value: 45,
          }, {
            name: '占比',
            value: 45,
          }]
        }
      ],
      tenSymptoms: [
        { name: "乏力", value: 0 },
        { name: "鼻塞", value: 0 },
        { name: "流涕", value: 0 },
        { name: "咽痛", value: 0 },
        { name: "嗅觉-味觉减退", value: 0 },
        { name: "结膜炎", value: 0 },
        { name: "肌痛", value: 0 },
        { name: "腹泻", value: 0 }
      ],
      stepData: [
        { name: " 入境 （转运）", value: 0, width: "10%" },
        {
          name: "入住",
          value: 1,
          state: true,
          width: "32%",
          arrIndex: 1,
          arrow: true
        },
        { name: "隔离", value: 2, state: true, width: "32%", arrIndex: 2 },
        {
          name: "离点",
          value: 3,
          state: true,
          width: "10%",
          arrIndex: 3,
          arrow: true
        },
        { name: "社区管理", value: 4, width: "" }
      ],
      statistics: {}
    };
  },
  mounted() {
    this.getQuery();
  },
  methods: {
    drawerShow(row) {
      if (row.name == "其他") {
        this.$refs.drawer.show("其他症状");
      }
    },
    async getQuery() {
      this.loading = true;
      try {
        const { data } = await staticalquery();
        const healthdata = await loadHealthInvestigateAndRiskAssessment();
        const dailydata = await loadDailyHealth();
        const {xiuMianGeLiDianNum} = await loadCheckinInformation();
        const checkinInfo={xiuMianGeLiDianNum}//只有休眠隔离点用新接口，其他都用老接口
        const personClassify = await loadPersonClassify();
        this.loading = false;
        // 隔离点
        this.geLiDianNum = data.data.geLiDianNum;
        this.geLiDianNaruNum = data.data.geLiDianNaruNum;
        // 2row 1col
        this.secondData[0].value = personClassify.miJieNum;
        this.secondData[0].rate = new BigNumber(personClassify.miJieNum).div(healthdata.personNum).multipliedBy(100).toFixed(2);

        this.secondData[1].value = personClassify.flightRuJingNum;
        this.secondData[1].rate =  new BigNumber(personClassify.flightRuJingNum).div(healthdata.personNum).multipliedBy(100).toFixed(2);

        this.secondData[2].value = personClassify.hongKongRuJingNum;
        this.secondData[2].rate = new BigNumber(personClassify.hongKongRuJingNum).div(healthdata.personNum).multipliedBy(100).toFixed(2);

        this.secondData[3].value = personClassify.zhongGaoFengXianNum;
        this.secondData[3].rate = new BigNumber(personClassify.zhongGaoFengXianNum).div(healthdata.personNum).multipliedBy(100).toFixed(2);

        this.secondData[4].value = personClassify.paiChaZhongDianNum;
        this.secondData[4].rate = new BigNumber(personClassify.paiChaZhongDianNum).div(healthdata.personNum).multipliedBy(100).toFixed(2);

        this.secondData[5].value = personClassify.otherNum;
        this.secondData[5].rate = new BigNumber(personClassify.otherNum).div(healthdata.personNum).multipliedBy(100).toFixed(2);
        this.secondData[5].detail = [{
          name: '其他人群',
          value: personClassify.otherNum,
        }, {
          name: '占比',
          value:`${new BigNumber(personClassify.otherNum).div(healthdata.personNum).multipliedBy(100).toFixed(2)}%`,
        }, {
          type: 'divided'
        }, {
          name: '治愈出院人员',
          value: personClassify.curedNum,
        }, {
          name: '占比',
          value: `${new BigNumber(personClassify.curedNum).div(healthdata.personNum).multipliedBy(100).toFixed(2)}%`,
        }]


        // 3row、1col
        this.tenSymptoms[0].value = data.data.faLiNum;
        this.tenSymptoms[1].value = data.data.biSaiNum;
        this.tenSymptoms[2].value = data.data.liuTiNum;
        this.tenSymptoms[3].value = data.data.yanTongNum;
        this.tenSymptoms[4].value = data.data.xiuJueWeiJueJianTuiNum;
        this.tenSymptoms[5].value = data.data.jieMoYanNum;
        this.tenSymptoms[6].value = data.data.jiTongNum;
        this.tenSymptoms[7].value = data.data.fuXieNum;

        this.statistics = { ...data.data, ...healthdata,...checkinInfo};
        this.statistics.dailydataOnce=dailydata.once//日常检测人数用新接口的数据
        this.statistics.dailydataTotal=dailydata.total//日常检测人数用新接口的数据

        // 隔离人员
        this.statisticsArr[1].weekList[0].rate = new BigNumber(this.statistics.healthInvestigateNum).div(this.statistics.personNum).multipliedBy(100).toFixed(2) + '%'
        this.statisticsArr[1].weekList[1].rate = new BigNumber(this.statistics.riskAssessmentNum).div(this.statistics.personNum).multipliedBy(100).toFixed(2) + '%'
        this.statisticsArr[1].weekList[2].rate = new BigNumber(this.statistics.dailydataOnce).div(this.statistics.dailydataTotal).multipliedBy(100).toFixed(2) + '%'


        this.loading = false;
      } catch {
        this.loading = false;
      }
    },
    shujukanban() {
      this.$router.push({ path: "/gl/bulletinboard" });
    },
    handleSjkbClick () {
      this.shujukanban()
    },
    goList(dataType, zzIds, item) {
      if (item.detail) {
        return
      }
      if (dataType == "10" || dataType == "24" || dataType == "25") {
        this.$router.push({
          path: "/riskDetail",
          query: { dataType }
        });
      }

      const extendQuery = {}
      if (item && item.detailTitle) {
        extendQuery.title = item.detailTitle
      }
      if (dataType == "10" || dataType == "24" || dataType == "25") {
        this.$router.push({
          path: "/riskDetail",
          query: { ...extendQuery, dataType },
        });
      } else if (dataType == "41") {
        this.$router.push({
          path: "/flightTopic",
          query: extendQuery
        });
      } else {
        this.$router.push({
          path: "/riskList",
          query: { ...extendQuery, dataType, zzIds, title: item.name},
        });
      }
    },
    handleSecondItemClick (item) {
      if (item && item.click) {
        item.click()
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.v-views-risk {
  .topImg-box {
    width: 100%;
    height: 161px;
    position: absolute;
    left: 0;
    top: 0;
    img {
      width: 100%;
      height: 100%;
      vertical-align: baseline;
    }
  }
  // width: calc(100% - 14px);
  // width: 100%;
  box-sizing: border-box;
  .header {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    &-title {
      font-size: 18px;
      padding-left: 8px;
      font-weight: 400;
    }
    .system {
      white-space: nowrap;
      color: #3b99ee;
      font-size: 32px;
      margin-right: 30px;
      margin-top: 20px;
    }

    .legend {
      width: 540px;
      height: 70px;
      color: #3b99ee;
      background: #e8f4ff;
      border-radius: 4px;
      border: 1px solid #60b2fd;
      padding: 0 30px;
      margin-top: 20px;
      margin-left: auto;
      margin-right: 15px;
      display: flex;
      align-items: center;
      white-space: nowrap;

      .legend-circle {
        width: 6px;
        height: 6px;
        background: #60b2fd;
        border-radius: 50%;
        margin-right: 6px;
      }
      h2 {
        font-size: 28px;
      }
      .legend-num {
        margin-left: auto;
        margin-right: 0;
      }
    }
  }
  .view-risk-container{
    margin-left: -10px;
    margin-right: -10px;
  }
  .body-div {
    width: 100%;
    box-sizing: border-box;
    .exhibition {
      border-radius: 6px;
      min-height: 240px;
      .big-div {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        > div {
          display: flex;
          // padding: 10px;
        }
        .big-div-one {
          // flex: 3;
          width: 100%;
          // height: 127px;
          // padding: 65px 0;
          // height: 300px;
          // padding: 20px 8px;
          background: url("../../assets/images/risk_bg1.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .big-div-two {
          // flex: 4;
          width: 100%;
          // padding: 65px 0;
          background: url("../../assets/images/risk_bg2.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .big-div-three {
          // flex: 3;
          width: 100%;
          // padding: 65px 0;
          background: url("../../assets/images/risk_bg3.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .leftBox {
          width: 124px;
          // flex: 2;
          height: 100%;
          color: #fff;
          position: relative;
          // padding-top: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column-reverse;
          &::after {
            content: "";
            display: block;
            width: 0px;
            height: calc(100% - 40px);
            width: 2px;
            opacity: 0.62;
            border-right: 2px solid;
            border-image: radial-gradient(
                circle,
                rgba(255, 255, 255, 1),
                rgba(255, 255, 255, 0)
              )
              2 2;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            // background: #fff;
          }
          &_titleBox {
            display: flex;
            align-items: center;
            // justify-content: center;
            flex-direction: column;
            // cursor: pointer;
          }
          &_titleNum {
            color: #fff;
            margin-top: 4px;
            margin-bottom: 6px;
            font-size: 24px;
            font-weight: Medium;
            line-height: 24px;
            // margin-top: 6px;
          }
          &_titleName {
            font-size: 11px;
            line-height: 11px;
            font-weight: normal;
            color: white;
            // height: 40px;
          }
          &_img {
            width: 28px;
            height: 28px;
            // position: absolute;
            // top: 12px;
            // left: 15%;
            margin-bottom: 4px;
            img {
              width: 100%;
              height: 100%;
              vertical-align: baseline;
            }
          }
        }
        .left_ul {
          width: 240px;
          height: 100%;
          box-sizing: border-box;
          display: flex;
          // flex: 3;
          // align-items:center;
          flex-wrap: wrap;
          // padding: 10px 0;
          padding-bottom: 10px;
          padding-left: 10px;
          .left_li {
            width: 50%;
            padding: 0 22.5px;
            // margin: 16px 0 0 0;
            margin-top: 14px;
            margin-bottom: 2px;
            height: 42px;
            // display: flex;
            // align-items: center;
            // justify-content: center;
            // flex-direction: column;
            // cursor: pointer;
            .left_li_num {
              font-size: 24px;
              line-height: 24px;
              color: #fff;
              margin-bottom: 4px;
              font-weight: Medium;
            }
            .left_li_name {
              font-size: 11px;
              line-height: 12px;
              color: #fff;
              font-weight: normal;
            }
            span {
              font-size: 15px;
              font-weight: bold;
              color: white;
              height: 40px;
              margin-top: 11px;
            }
            .name {
              margin-bottom: 10px;
              font-size: 40px;
              font-weight: bold;
            }
            .bar {
              width: 44px;
              height: 44px;
              position: absolute;
              top: 12px;
              left: 15%;
            }
          }
        }
        .right_ul {
          .right_li {
            // cursor: pointer;
            // width: 33.3%;
          }
        }
        .new_ul {
          .new_li {
            // cursor: pointer;
            width: 50%;
          }
        }
      }
      .symptoms-box {
        padding: 0 7px;
        margin-top: 8px;
      }
      .symptoms-ul {
        width: 98.5%;
        // height: 168px;
        display: flex;
        justify-content: center;
        margin: 0 auto;
        flex-wrap: wrap;
        background: rgb(246, 251, 255);
        border: 1px solid #60b2fd;
        border-radius: 8px;
        padding: 5px 0;
        .symptoms-li {
          width: 33.3%;
          flex-wrap: wrap;
          // margin: 13px 0 4px 0;
          margin: 8.5px 0;
          // // height: (168 / 2)px;
          // background: linear-gradient(270deg, #dceeff 0%, #bee0ff 100%);
          // box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
          // background-repeat: no-repeat;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          // font-size: 36px;
          // color: #2881e2;
          // cursor: pointer;
          text-align: center;
          .symptoms-l {
            margin-left: auto;
            margin-right: auto;
            width: 28px;
            height: 28px;
            img {
              width: 100%;
              height: 100%;
              vertical-align: baseline;
            }
          }
          .num {
            font-size: 24px;
            line-height: 24px;
            color: #2881e2;
            margin: 8px 0 6px 0;
            font-weight: Medium;
          }
          .text {
            font-size: 11px;
            line-height: 11px;
            color: #2881e2;
            font-weight: normal;
          }
          .percent{
            margin-top: 6px;
            font-size: 12px;
          }
        }
        .symptoms-li:nth-of-type(2),
        .symptoms-li:nth-of-type(5) {
          width: 33.4%;
          position: relative;
          &::before {
            content: "";
            display: block;
            width: 0;
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            opacity: 0.62;
            border-left: 2px solid;
            border-image: radial-gradient(
                circle,
                rgba(96, 178, 253, 1),
                rgba(96, 178, 253, 0)
              )
              2 2;
          }
          &::after {
            content: "";
            display: block;
            width: 0;
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            opacity: 0.62;
            border-left: 2px solid;
            border-image: radial-gradient(
                circle,
                rgba(96, 178, 253, 1),
                rgba(96, 178, 253, 0)
              )
              2 2;
          }
        }
        .symptoms-li:nth-last-child(2) {
          // padding-right: 20px;
        }
        /*.symptoms-li:last-child {*/
        /*  position: relative;*/
        /*  width: 36%;*/
        /*  &::before {*/
        /*    content: "";*/
        /*    display: block;*/
        /*    position: absolute;*/
        /*    left: 0;*/
        /*    top: 0;*/
        /*    width: 0;*/
        /*    height: 100%;*/
        /*    opacity: 0.62;*/
        /*    border-left: 2px solid;*/
        /*    border-image: radial-gradient(*/
        /*        circle,*/
        /*        rgba(96, 178, 253, 1),*/
        /*        rgba(96, 178, 253, 0)*/
        /*      )*/
        /*      2 2;*/
        /*  }*/
        /*}*/
      }
    }

    .indicator {
      width: 100%;
      // height: 380px;
      box-sizing: border-box;
      padding-top: 50px;
      .step {
        // padding: 0 30px;
        // bottom: 10px;
        top: 50px;
        .step-ul {
          display: flex;
          justify-content: center;
          .step-li {
            display: flex;
            justify-content: center;
            flex-direction: column;
            position: relative;
            .wire-item {
              width: 100%;
              position: absolute;
              top: 0px;
              // left: 4px;
              // transform: translate(-50%, -100%);
            }
            .big-spancir {
              display: flex;
              flex-direction: column;
              // position: relative;
              .step-name {
                transform: translateX(-4px);
                font-size: 15px;
                font-weight: bold;
                white-space: nowrap;
                color: #666666;
                img {
                  width: 13px;
                }
              }
              .big-spancir_img {
                width: 20px;
                height: 22.5px;
                position: absolute;
                top: -30px;
                // bottom: 64px;
                left: 2px;
                img {
                  vertical-align: baseline;
                  width: 100%;
                  height: 100%;
                }
              }
              .circle {
                display: inline-block;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background: white;
                // box-shadow: 0px 0px 8px 0px rgba(0, 171, 213, 0.09),
                //   0px 0px 8px 0px rgba(90, 178, 255, 0.3);
                box-shadow: 0px 0px 4px 0px rgba(0, 171, 213, 0.3);
                margin-bottom: 10px;
                position: relative;
                z-index: 10;
                left: 4px;
                .big-circle {
                  display: inline-block;
                  width: 10px;
                  height: 10px;
                  border-radius: 50%;
                  background-color: rgba(219, 235, 254, 1);
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  // margin-left: -9px;
                  // margin-top: -9px;
                  .centerCircle {
                    display: inline-block;
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    background: #4e9dfd;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    // margin-left: -6px;
                    // margin-top: -6px;
                  }
                }
                .scale {
                  display: inline-block;
                  position: absolute;
                  height: 15px;
                  border: 1px dashed #4e9dfd;
                  left: 50%;
                  top: -15px;
                  display: none;
                }
              }
            }

            .linellae {
              display: inline-block;
              width: 100%;
              height: 2px;
              background: #dfe3e9;

              position: relative;
              top: -38px;
              left: 14px;
            }
          }
          .step-li:first-child {
            width: 20%;
            .linellae {
              position: absolute;
              top: 0;
              transform: rotate(45deg) translateY(-4px);
              z-index: 0;
            }
            .big-spancir {
              // position: relative;
              transform: translate(4px, -29px);
            }
            .step-name {
              font-size: 12px;
              width: 48px;
              color: #1a1b1f;
              overflow: hidden;
              white-space: normal;
              word-break: break-all;
              text-align: center;
              transform: translateX(-12px);
              font-weight: 500;
            }
          }
          .step-li:nth-last-child(2) {
            width: 20%;
            .linellae {
              position: absolute;
              top: 0;
              transform: rotate(-45deg) translateY(-4px);
            }
          }
          .step-li:last-of-type {
            // width: 20%;
            .big-spancir {
              // position: relative;
              transform: translate(0px, -29px);
            }
            .linellae {
              // width: 95%;
            }
            .step-name {
              width: 26px;
              color: #1a1b1f;
              overflow: hidden;
              white-space: normal;
              word-break: break-all;
              font-size: 12px;
              font-weight: 500;
            }
          }
        }
      }
      .statistics {
        .statistics-ul {
          width: 10%;
          display: flex;
        }
      }
    }
  }
  .active {
    background: #a9cfff !important;
  }

  .iconfont {
    margin-right: 5px;
  }
  .staticstics-nav {
    width: 100%;
    padding: 0 10px;
  }
  .symptoms-popover{
    display: block;
  }
}
.symptoms-detail__list{
  line-height: 1.7em;
}
.symptoms-detail__item{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.symptoms-detail__divided{
  border-bottom: 1px dashed #EEF0F2;
  margin: 6px 0;
}
</style>
<style>
body .el-popover.symptoms-popover__wrap{
  color: #fff;
  font-size: 12px;
  background-color: rgba(157, 164, 170, 0.9);
}
body .el-popover.symptoms-popover__wrap[x-placement^="bottom"] .popper__arrow{
  border-bottom-color: transparent;
}
body .el-popover.symptoms-popover__wrap[x-placement^="bottom"] .popper__arrow:after{
  border-bottom-color: rgba(157, 164, 170, 0.9);
}
body .el-popover.symptoms-popover__wrap[x-placement^="top"] .popper__arrow{
  border-top-color: transparent;
}
body .el-popover.symptoms-popover__wrap[x-placement^="top"] .popper__arrow:after{
  border-top-color: rgba(157, 164, 170, 0.9);
}
</style>
